<template>
  <div class="castContainer" v-cloak>
    <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
    <div class="castMain" :class="{ castMain2: isActive }">
      <div class="diaryTop">
        <img v-lazy="diaryTopimg">
      </div>
      <div class="inputTitle">
        <input type="text" placeholder="输入标题">
      </div>
      <div class="uAddContent">
        <div class="uAddContent-text font12" v-for="(uWrite, index) in uWrites" @click="editUAddContent(index)" v-model="textType">
          <p v-if="uWrite.type == 0" v-text="uWrite.text"></p>
          <img v-else :src="uWrite.img">
        </div>
      </div>
    </div>
    <!--编辑区域-->
    <div class="editAdd" flex="main:center cross:center">
      <ul>
        <li @click="editContent"><span><img src="../../../components/images/add_words.png"></span>文字</li>
        <li @click="changeFile('album')"><span><img src="../../../components/images/add_pic.png"></span>相册</li>
        <li @click="changeFile('video')"><span><img src="../../../components/images/take_photo.png"></span>拍摄</li>
      </ul>
    </div>
    <!--编辑内容区域-->
    <transition name="slide-fade">
      <div class="editContent" v-if="show">
        <textarea placeholder="输入正文内容" v-focus v-model="textContent"></textarea>
        <input type="submit" value="提交" @click="submitContent" style="width: 100px; height: 40px;">
      </div>
    </transition>
    <!--编辑-->
    <transition name="slide-fade">
      <div class="editModule" v-if="showEdit">
        <ul>
          <li @click="editRewrite">编辑</li>
          <li @click="editDelete">删除</li>
          <li @click="editCancel">取消</li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script>
  import API from '../../../api/api.js'
  import {imagedomain, domain} from '../../../api/api.js'
  const api = new API();
  export default {
    data () {
      return {
        diaryTopimg: '',
        show: false,
        isActive: false,
        domain: domain,
        imagedomain: imagedomain,
        pices: [],
        oldPics: [],
        imgKeys: [],

        uWrites: [], //日记增加模块 type:0-文字  type:1--图片
        textContent: '',  //编辑正文内容
        textType: 0,
        showEdit: false, //是否显示编辑层
        itemIndex: -1,
      }
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus();
        }
      }
    },
    methods:{
      //编辑内容
      editContent(){
        this.show = true
        this.isActive = true
        this.itemIndex = -1
      },
      //提交内容
      submitContent(){
        //判断提交内容是否为空
        if(this.textContent==''){
          alert('请输入内容！')
        }else{
          //判断是否提交新内容
          if(this.itemIndex==-1){
            console.log('提交新内容')
            this.uWrites.push({ text: this.textContent, type: 0 })
          }else{
            console.log('修改之前提交内容')
            this.uWrites[this.itemIndex].text = this.textContent
          }

          this.show = false
          this.isActive = false
          this.textContent = ''
        }

      },
      //点击发布的内容
      editUAddContent(index){
        this.showEdit = true
        this.itemIndex = index
      },
      //编辑
      editRewrite(){
        this.show = true
        this.isActive = true
        this.showEdit = false
        this.textContent = this.uWrites[this.itemIndex].text
      },
      //删除模块
      editDelete(){
        this.uWrites.splice(this.itemIndex,1)
        this.showEdit = false
      },
      //取消编辑
      editCancel(){
        this.showEdit = false
      },

      changeFile(type){
        //TODO:客户端上传文件
        if (9 - (this.oldPics.length+this.pices.length) > 0) {
          this.$util.JsBridge('getPicesList', {
            picItemCount: 9 - (this.oldPics.length+this.pices.length),
            showType: type,
            appType: 'APP_HOMEWORK'
          }, (res) => {
            this.changeFileCallBack(res);
          })
        } else {
          this.$toast('您最多只能上传9个附件');
        }
      },
      changeFileCallBack(res){
        this.imgKeys = res;
        for (let i = 0; i < res.length; i++) {
          this.getImgInfo(res[i])
        }
      },
      getImgInfo(rs){
        this.$util.JsBridge('getImgInfo', {
          fileKey: rs
        }, (res) => {
          try {
            if (res.datathumbnail && res.datathumbnail.indexOf('data:image/png;base64') == -1) {
              res.datathumbnail = 'data:image/png;base64,' + res.datathumbnail;
            }
            res.imgUrl=rs;
            res.type=res.datatype;
            if(res.datatime){
              res.time=res.datatime;
            }
            this.pices.push(res);
          } catch (e) {
            console.log(e.message)
          }

        })
      },

    }
  }
</script>
<style scoped lang="scss">
  .castContainer{
    width: 100%;
    background: #0d0d0d;
    .castMain{
      width: 100%;
      position: relative;
      z-index: 10;
    }
    .castMain2{
      z-index: 0;
    }
    .diaryTop{
      width: 100%;
      height: 2rem;
      background: #d8d8d8;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
      }
    }
    .inputTitle{
      margin: 0.12rem;
      border-radius: 0.06rem;
      width: 3.5rem;
      height: 0.31rem;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
      input{
        width: 100%;
        height: 0.31rem;
        line-height: 0.31rem;
        border: none;
        padding: 0 0.15rem;
        background: none;
        color: #fff;
      }
      input::-webkit-input-placeholder{
        color: #ffffff;
        opacity: 0.5;
      }
    }
    .uAddContent-text{
      border: 1px dashed rgba(255,255,255,0.2);
      margin: 0.12rem;
      padding: 0.12rem;
      border-radius: 0.06rem;
    }
    .editAdd{
      width: 100%;
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 50;
      padding: 0.24rem 0;
      li{
        float: left;
        width: 0.46rem;
        font-size: 0.11rem;
        text-align: center;
        margin: 0 0.28rem;
        span{
          display: block;
          width: 0.46rem;
          height: 0.46rem;
          overflow: hidden;
          margin-bottom: 0.1rem;
          img{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
          }
        }
      }
    }
    .editAdd:after{
      content: '';
      clear: both;
      width: 0;
      height: 0;
      visibility: hidden;
      display: flex;
    }
    .slide-fade-enter-active {
      transition: all .6s ease;
    }
    .slide-fade-leave-active {
      transition: all .6s ease;
    }
    .slide-fade-enter, .slide-fade-leave-to {
      transform: translateY(100px);
      opacity: 0;
    }
    .editContent{
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 100;
      textarea{
        font-family:PingFangSC-Regular;
        width: 100%;
        box-sizing: border-box;
        margin-top: 0.2rem;
        padding: 0 0.2rem;
        border: none;
        background: none;
        min-height: 2rem;
        color: #fff;
      }
      textarea::-webkit-input-placeholder{
        color: #fff;
        opacity: 0.5;
        font-family:PingFangSC-Regular;
        font-size: 0.12rem;
      }
    }
    .editModule{
      width: 100%;
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 100;
      li{
        width: 100%;
        height: 0.48rem;
        line-height: 0.48rem;
        text-align: center;
        font-size: 0.15rem;
        color: #fff;
        background:#272629;
      }
      li:nth-child(2){
        border-top: 1px solid #000;
      }
      li:nth-child(3){
        margin-top: 0.08rem;
      }
    }
  }
</style>
